<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1.经典导航条</title>
<link rel="stylesheet" type="text/css" href="../public/public.css"/>
<style>
	.nav{
		width:100%;
		height:45px;
		position:relative;
		background:red;
	}
	.nav .ul{
		width:1000px;
		height:45px;
		margin:0px auto;
		position:relative;
	}
	.nav .ul .list{
		width:20%;
		height:45px;
		margin:0px;
		position:relative;
		float:left;
	}
	.nav .ul .list .name{
		width:100%;
		height:45px;
		line-height:45px;
		margin:0px;
		position:relative;
		display:block;
		text-align:center;
		color:#fff;
	}
	.nav .ul .list .name:hover,.nav .ul .current .name{
		background:#cc0c0c;
	}
	.nav .sub-nav{
		position:absolute;
		top:45px;
		left:0px;
		right:0px;
		background:#cc0c0c;
		display:none;
	}
	.nav .sub-nav .sub-list{
		width:100%;
		height:40px;
		border-top:1px solid #e61010;
	}
	.nav .sub-nav .sub-list .sub-name{
		width:100%;
		height:40px;
		line-height:40px;
		position:relative;
		display:block;
		text-align:center;
		color:#fff;
		
	}
	.nav .sub-nav .sub-list .sub-name:hover{
		background:#a90b0b;
	}
</style>
</head>

<body>
    <Br><Br>
<h1 class="h1-text">案例1-经典导航条</h1>
<div class="div-des">
	<h2 class="name">目的：</h2>
    <p class="des">
    	1.练习+熟练使用css+div布局和样式控制；<Br />
    	2.熟悉Jquery的写法和基础规则，如：$(function(){})等；<Br />
    </p>
    <h2 class="name">要求：</h2>
    <p class="des">
        1.熟练使用css+div布局和样式控制（导航模块的风格不限制，包括颜色，布局等）；<Br />
        2.用Jquery完成页面的部分交互效果；<Br />
    </p>
    <h2 class="name">用到的Jquery知识点：</h2>
    <p class="des">
        Jqery内置的方法有包括 ：<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;1.鼠标滑过 hover() ;<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;2.添加或删除Class : addClass("you class")or removeClass("you class")；<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;3.显示或关闭元素(如div、span、i等) : show() or hide()；<Br />
    </p>
</div>
<Br><Br><Br><Br><Br>

	<div class="nav">
    	<ul class="ul">
        	<li class="list"><a href="" class="name">首页</a></li>
        	<li class="list">
                <a href="" class="name">页面1</a>
            	<ul class="sub-nav">
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                </ul>
            </li>
        	<li class="list">
                <a href="" class="name">页面2</a>
            	<ul class="sub-nav">
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                </ul>
            </li>
        	<li class="list">
                <a href="" class="name">页面3</a>
            	<ul class="sub-nav">
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                </ul>
            </li>
        	<li class="list">
                <a href="" class="name">页面4</a>
            	<ul class="sub-nav">
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                	<li class="sub-list"><a href="" class="sub-name">二级导航</a></li>
                </ul>
            </li>
        </ul>
    </div>


<script type="text/javascript" src="../public/jquery.js"></script>
<script>
	$(function(){
		//申明Jquery固定的函数，Js代码都写在这个Function 里面
		
		$(".nav .list").hover(function(){
			//鼠标滑过的时候
			$(this).addClass("current");
			$(this).find(".sub-nav").show();
			
		},function(){
			//鼠标离开的时候
			$(this).removeClass("current");
			$(this).find(".sub-nav").hide();
		})
	})

</script>
</body>
</html>
